<template>
    <el-drawer size="700" v-model="userStore.isFollowListOpen" title="关注列表" direction="rtl" :before-close="handleClose">
        <el-empty v-if="userStore.FollowList.length == 0">
            暂无关注的作者，快去添加几个喜欢的作者吧！
        </el-empty>
        <el-scrollbar v-else max-height="400px">
            <el-space direction="vertical" fill style="width: 100%;">
                <el-card style="cursor: pointer;" @click="OpenDetails(user.id)" v-for="user in userStore.FollowList"
                    :key="user.id" shadow="hover">
                    <template #header>
                        <div class="user-header">
                            <el-avatar :src="`${config.downloadUrl}?name=${user.avatar}`" />
                            <span class="username">{{ user.username }}</span>
                            <span @click="deleteFollow(user.id)" style="color: blueviolet;cursor: pointer;"
                                class="deleteFollow">取消关注</span>
                        </div>
                    </template>
                    <div>
                        <p>邮箱: {{ user.email || "未提供" }}</p>
                    </div>
                </el-card>
            </el-space>
        </el-scrollbar>
        <el-drawer size="400" v-model="userStore.isFollowDetailsOpen" title="相关作品" :append-to-body="true">
            <div v-if="userStore.FollowDetailsList.length > 0" class="article-list">
                <div v-for="article in userStore.FollowDetailsList" :key="article.id" class="article-card">
                    <div @click="openAricleDetails(article.id)">
                        <div class="card-header">
                            <h3 class="card-title">{{ article.title }}</h3>
                        </div>
                        <div class="card-body">
                            <p class="card-content">{{ truncateContent(article.content, 100) }}</p>
                            <img v-if="article.pic" :src="`${config.downloadUrl}?name=${article.pic}`" alt="作品图片"
                                class="card-image" />
                        </div>
                        <div class="card-footer">
                            <p class="card-meta">浏览量: {{ article.viewCount }}</p>
                            <p class="card-meta">发布时间: {{ formatDate(article.createTime) }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="empty-tip">
                <p>暂无相关作品</p>
            </div>
        </el-drawer>
    </el-drawer>
    <ditials v-if="forYouStore.isdrawerOpen" />
</template>

<script setup>
import { useUserStore } from "../../../stores/user";
import config from "../../../../public/config";
import { deleteUserFollow } from "../../../api/userFollow";
import { userFollow } from "../../../api/user";
import { ElMessage } from "element-plus";
import { selectUserPublish } from "../../../api/article";
import ditials from "../../ForYou/components/ditials.vue";
import { useForYouStore } from "../../../stores/foryou";

const userStore = useUserStore();
const forYouStore = useForYouStore();

// 关闭抽屉
const handleClose = () => {
    userStore.isFollowListOpen = false;
};

async function getUserFollow() {
    let params = new URLSearchParams()
    params.append("followerId", localStorage.getItem("userId"))
    await userFollow(params)
        .then(res => {
            userStore.follow = res.data
        })
}

async function deleteFollow(id) {
    const params = new URLSearchParams
    params.append("followeeId", id)
    params.append("followerId", localStorage.getItem("userId"))
    await deleteUserFollow(params).then(res => {
        if (res.code === 200) {
            userStore.isFollowListOpen = false
            getUserFollow()
            ElMessage({
                type: 'success',
                message: res.data,
            });

        }
    })
}
function OpenDetails(id) {
    userStore.isFollowDetailsOpen = true
    userStore.FollowDetailsId = id
    getFollowerArticles()
}

// 截断内容
function truncateContent(content, maxLength) {
    if (content.length > maxLength) {
        return content.slice(0, maxLength) + '...';
    }
    return content;
}

// 格式化日期
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString(); // 你可以根据需要格式化日期
}
async function getFollowerArticles() {
    const params = new URLSearchParams
    params.append("userId", userStore.FollowDetailsId)
    await selectUserPublish(params).then(res => {
        if (res.code === 200) {
            userStore.FollowDetailsList = res.data.list
            console.log(userStore.FollowDetailsList)
        }
    })
}
function openAricleDetails(id) {
    forYouStore.articleId = id
    userStore.isFollowDetailsOpen = false
    forYouStore.isdrawerOpen = true
}
</script>

<style scoped>
.user-header {
    display: flex;
    align-items: center;
}

.username {
    margin-left: 10px;
    font-weight: bold;
}

.deleteFollow {
    margin-left: 10px;
    font-weight: bold;
    color: blueviolet;
    cursor: pointer;
    transition: text-decoration 0.3s ease;
}

.deleteFollow:hover {
    text-decoration: underline;
}

.article-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.article-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-header {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.card-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.card-body {
    padding: 16px;
}

.card-content {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-top: 12px;
    border-radius: 4px;
}

.card-footer {
    padding: 16px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
}

.card-meta {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.empty-tip {
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #999;
}
</style>
